import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import Star from '../../../components/base/star'
import HotelProductTags from '../../../components/base/Hotel-product-tags'
import { IHotelProductListItem } from '../../../interfaces/hotel'
import './index.styl'
interface Iprpos {
  readonly list: IHotelProductListItem[]
}
class HotelProductList extends Component<Iprpos, {}> {
  constructor() {
    super(...arguments)
  }
  componentWillMount() {
  }
  render() {
    return (
      <View className='list-pannel'>
        <View className='ul'>
          {
            this.props.list && this.props.list.length && this.props.list.map((item, index) => (
              <View className='li' key={`${index}-li`}>
                <View className='logo'>
                  <View className='img' style={`background-image: url(${item.image})`}></View>
                </View>
                <View className='hotel-section'>
                  <View className='name'>{item.hotel_name}</View>
                  <View className='star-and-fitup'>
                    <Star num={item.star} type={item.is_official_rat}/>
                    <Text>{item.levelName} {item.decorate_date}</Text>
                  </View>
                  <View className='distance'>{item.distance_desc} {item.shop_area_name}</View>
                  <View className='tags-and-price'>
                    <HotelProductTags tags={item.tag_names} showMaxNum={2} />
                    <View className='price-box'>
                      <Text className='symbol'>￥</Text>
                      <Text className='num'>{item.price}</Text>
                      <Text className='subtext'>起</Text>
                    </View>
                  </View>
                </View>
              </View>
            ))
          }
        </View>
      </View>
    )
  }
}
export default HotelProductList